<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            border: 1px solid #cccccc;
            padding: 10px;
        }
        .box{
            border: 1px solid #cccccc;
            margin-left: 50px;
            padding: 10px;
        }
        p{
            padding-left: 20px;
        }
        input{
            margin-left: 20px;
        }
    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>父组件范围</h3>
        <p>text:{{ text }}</p>
        <!-- <child-one v-on:updateMsg="updateMsg()"></child-one> -->
        <!-- <child-one v-on:update-msg="updateMsg($event)"></child-one> -->

        <!-- 
            下述事件绑定方式，为vue v-on的一种特殊的事件绑定操作
            下述绑定依然可以满足常规事件的调用操作
            因为没有在语法定义时指定()，所以该定义方法无法完成参数传递
            此时的回调将被vue默认传入 $event 作为参数

            在子组件标签上绑定事件时，所有事件默认都会被记录与组件 _events 中，且只能通过$emit 调用
            如果需要将事件传播给组件的根标签，进行原生DOM的事件监听，需要在绑定时提供修饰符 .native
                .native - 监听组件根元素的原生事件。
        -->
        <child-one v-on:update-msg="updateMsg" @click.native="printEvent()"></child-one>


    </div>
</body>
<script type="text/x-template" id="one">
    <div class="box">
        <h3>子组件范围</h3>
        <p>msg:{{ msg }}</p>
        <input type="button" value="输出事件记录对象" @click="printEvent()"><br><br>
        <input type="button" value="发送msg变量" @click="sendMsg()">

    </div>
</script>
<script>
    /*
    1、技术实现：事件绑定，事件触发
       详细描述：在子组件标签上 以事件绑定的方式 调用父组件方法，在子组件对应的执行区通过 $emit 实例属性进行自定义事件触发，并传递参数
        + 事件绑定：在子组件标签上 以事件绑定的方式 绑定自定义事件
                    子组件标签上绑定的事件，在vue对组件进行实例化时，会统一转存到 组件实例私有事件记录对象 _events 中
                    1.记录器记录事件时不会区分大小写,多单词事件名一般以连字符方式定义
                    2.记录器记录连字符事件时，不会将连字符转换为驼峰名称

        + 事件触发：在子组件的执行范围类，vue提供一个实例方法 $emit() 可以调用私有事件记录对象 _events 中的 自定义事件
                    语法：$emit(需要被触发的绑定事件名称,$event的取值) 
                    1.通过$emit 方法的第二参数 自定义事件源的相关取值
                    2.$emit 配合调试工具 记录传递过程
    */
    Vue.component("ChildOne",{
        template:"#one",
        data(){
            return {
                msg:"子组件的数据"
            }
        },
        methods: {
            printEvent(){
                console.log(this._events);      
            },
            sendMsg(){
                // console.log(this);
                console.log(this.msg);
                // this.$emit("update-msg");
                this.$emit("update-msg",this.msg);

            }
        },
        created() {
            this.$emit("update-msg",this.msg)
        },
    })
    new Vue({
        el:"#app",
        data:{
            text:"父组件的变量text"
        },
        methods: {
            updateMsg(value){
                // console.log(this);
                console.log(this.text);
                console.log("形参变量:",value);
                console.log("new Vue的updateMsg方法");
                this.text = value;
            },
            printEvent(){
                console.log("传递到子组件根标签的原生点击事件被触发");
            }
        },
    })


</script>
</html>